<template>
  <div id="app">
    <ChildA />
    <ChildB />
    <div>doubleCount: {{ $store.getters.doubleCount }}</div>

    <div>user - getters - listLength: {{ $store.getters['user/listLength'] }}</div>
    <div>goods - getters - listLength2: {{ $store.getters['goods/listLength'] }}</div>

    <div>
      用户列表：
      <ul>
        <!-- 因为 of 是 es6 出的最新的循环语法，其目的就是为了统一所有的循环语法 -->
        <li v-for="(v, i) of $store.state.user.list" :key="i">{{ v }}</li>
      </ul>
      <button @click="addUser">添加一个用户</button>
      <button @click="addUser2">一秒后添加一个用户</button>
    </div>

    <div>
      商品列表：
      <ul>
        <li v-for="(v, i) of $store.state.goods.list" :key="i">{{ v }}</li>
      </ul>
      <button @click="onClick3">一秒后删除最后一个商品</button>
    </div>
  </div>
</template>

<script>
import ChildA from '@/components/ChildA.vue'
import ChildB from '@/components/ChildB.vue'

export default {
  name: 'App',
  components: {
    ChildA,
    ChildB,
  },
  methods: {
    async onClick3() {
      // 调用 goods 模块下的 delLastGoods 这个 action
      await this.$store.dispatch('goods/delLastGoods')
      console.log('删除成功')

      // // 调用 goods 模块下的 delLastGoods 这个 action
      // const result = this.$store.dispatch('goods/delLastGoods')
      // console.log(result, 2222)

      // result.then(() => {
      //   console.log('删除成功')
      // })

      // 在商品删除完成后，打印一个 console.log('删除成功') 的提示
    },
    addUser2() {
      this.$store.dispatch('user/addUser', '老六')
    },
    addUser() {
      // 调用用户模块下的addUser这个mutation函数
      const result = this.$store.commit('user/addUser', '孙七')
      console.log(result, 1111)
    },
  },
}
</script>
